//导入node.js自带的核心模块path处理路径模块，node.js自带的核心模块不需要额外安装
var path = require('path');

//__dirname: node.js的全局变量，表示当前文件的绝对路径
// console.log('__dirname ==>', __dirname);
// console.log(path.resolve(__dirname, 'public'));

//导入mini-css-extract-plugin插件
var minicssextractplugin = require('mini-css-extract-plugin');

//配置html-webpack-plugin处理html文件
var HtmlWebpackPlugin = require('html-webpack-plugin');


//导出配置
module.exports = {
    //webpack所有配置都需要在这里写

    //打包模式
    //development: 开发环境模式，打包输出的js文件没有压缩的
    //production：生产环境模式，打包输出的js文件是压缩的
    //none: 尽可能保持原本代码格式
    mode: 'production',

    //配置入口文件（打包入口）
    // entry: './xxx/xxx.js',

    //将多个入口js文件合并到一个js文件输出
    //entry: ['./xxx/xxx.js', './xxx/xxx.js'],

    //修改输出js文件名并且分别输出，不会合并到一个js文件
    // entry: {
    //     xxx(name1): './xxx/xxx.js',
    //     xxx(name2): './xxx/xxx.js'
    // }

    //配置出口（打包输出目录）
    output: {
        //输出目录
        path: path.resolve(__dirname, 'public'),

        //指定文件名输出，不允许入口配置使用对象配置多个入口文件
        //filename: 'myapp.js'
        //filename: new Date().getTime() + '[name].js'
        //filename: '[name].[hash].js'
    },

    //配置loader
    module: {
        //loader所有解析规则
        rules: [
            {
                //css-loader
                //配置文件后缀
                test: /\.css$/,

                //css-loader解析css文件
                // use: ['style-loader', 'css-loader']

                //css-loader解析css文件，并且分离css
                // use: [minicssextractplugin.loader, 'css-loader']
                use: [
                    {
                        loader: minicssextractplugin.loader
                    },
                    {
                        loader: 'css-loader'
                    }
                ]
            },

            {
                //less-loader
                test: /\.less$/,

                //less-loader解析less
                // use: ['style-loader', 'css-loader', 'less-loader']

                //less-loader解析less文件，并且分离less
                use: [minicssextractplugin.loader, 'css-loader', 'less-loader']
            },

            {
                //配置url-loader处理图片
                //url-loader
                test: /\.(jpg|png|gif|bmp|jpeg)$/,

                // use: 'url-loader?limit=10000$name=[hash:8]-[name].[ext]'
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            //不要输出对象，直接输出一个字符串（base64或者图片路径）
                            esModule: false,

                            //限制base64大小，如果图片大小大于limit ==> 图片路径，如果图片大小小于等于limit ==>base64
                            limit: 1024 * 10
                        }
                    }
                ],

                //模块类型，webpack5可以正常输出css背景图
                type: 'javascript/auto'

            },

            {
                //配置html-withimg-loader处理html文件的图片
                test: /\.(htm|html)$/,
                loader: 'html-withimg-loader'

            }
        ]
    },

    //配置插件
    plugins: [
        new minicssextractplugin({
            filename: 'app.css'
        }),

        //配置html-webpack-plugin处理html文件
        new HtmlWebpackPlugin({
            //模板路径
            template: './index.html',

            //true：将打包的js添加到head的结束标签前面
            //false：不会使用打包的ja、css
            //body: 将js放到body结束标签之前
            //head：将打包的js添加到head的结束标签前面
            inject: 'body',

            //压缩
            minify: {
                //移除注释
                removeComments: true,

                //移除（合并）空白符
                collapseWhitespace: true,

                //移除标签属性的引号
                removeAttributeQuotes: true,

            },

            //指定文件名输出
            filename: 'app.min.html'

        }),


    ]
}